<template>
  <div class="main-container">
    <div class="top-box" style="display: flex; justify-content: space-between; align-items: center;">
      <div>
        <h3>投诉建议数据统计</h3>
      </div>
    </div>

    <div class="middle-boxes-container">
      <div class="left-middle-box">
        <div id="lineChart" style="width: 100%; height: 400px;"></div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { ElMessage, ElButton } from "element-plus";
import * as echarts from "echarts";
import { defineComponent, nextTick } from 'vue';

export default defineComponent({
  name: 'StatisticsComplaints',
  data() {
    return {
      communityId: "",
      communityList: null,
      complaintCounts: []
    };
  },
  mounted() {
    this.fetchCommunityList();
  },
  methods: {
    async fetchCommunityList() {
      try {
        const token = localStorage.getItem('token');
        if (!token) {
          ElMessage.error('未获取到token，请重新登录');
          return;
        }
        const response = await axios.get('/api/community/search', {
          headers: {
            Authorization: token
          }
        });
        console.log(response);
        this.communityList = response.data.data;
        console.log('this.community', this.communityList);
        await this.fetchComplaintCounts();
        await nextTick(); // 确保 DOM 更新完成
        this.drawLineChart();
      } catch (error) {
        ElMessage.error('获取小区列表时出错：' + error.message);
      }
    },
    async getCountByCommunity(communityId) {
      try {
        const token = localStorage.getItem('token');
        const response = await axios.get('/api/complain', {
          headers: {
            Authorization: token
          },
          params: {
            current: 1,
            size: 10,
            communityId: communityId
          }
        });
        return response.data.data.total;
      } catch (error) {
        ElMessage.error('获取对应小区投诉建议记录数量失败:', error);
        this.errorMessage = '获取数据失败，请稍后重试';
        return 0;
      }
    },
    async fetchComplaintCounts() {
      if (this.communityList) {
        for (const community of this.communityList) {
          const count = await this.getCountByCommunity(community.id);
          this.complaintCounts.push({
            communityName: community.communityName,
            count: count
          });
        }
      }
    },
    drawLineChart() {
      const chartDom = document.getElementById('lineChart');
      if (chartDom) { // 检查 DOM 元素是否存在
        const myChart = echarts.init(chartDom);
        const xData = this.complaintCounts.map(item => item.communityName);
        const yData = this.complaintCounts.map(item => item.count);

        const option = {
          title: {
            text: '各小区投诉建议数量统计',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            data: xData
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              type: 'line',
              data: yData
            }
          ]
        };

        myChart.setOption(option);
      }
    }
  }
});
</script>

<style scoped>
.main-container {
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.top-box {
  display: flex;
  flex-direction: row;
  padding: 20px;
  align-items: center;
  text-align: center;
  margin-bottom: 10px;
}

.middle-boxes-container {
  display: flex;
  justify-content: space-between;
}

.left-middle-box{
  padding: 20px;
  width: 98%;
  border-radius: 3px;
  text-align: center;
  /* 增加外边距 */
  margin: 0 10px;
  /* 修改背景透明度 */
  background-color: rgb(253, 253, 253);
}
</style>